<template>
	<view class="container">
		<!-- 运动圈动态 -->
		<view class="moment-body">
			<block v-for="(item,index) in momentList" :key="index">
				<view class="moment-one">
					<image class="moment-face" :src="item.dynamic.avatar" mode=""></image>
					<view class="moment-box">
						<view class="moment-name">{{item.dynamic.nickname}}</view>
						<view class="moment-content">{{item.dynamic.text}}</view>
						<view class="moment-img">
							<u-album :urls="item.images" keyName="url" v-if="item.images.length >0"></u-album>
						</view>
						<text class="moment-adress" v-if="item.adress !== ''">{{item.dynamic.location}}</text>
						<view class="time-more">
							<text class="time">{{$u.timeFrom(new Date(item.dynamic.createTime).getTime(),false)}}</text>
							<view class="more-box">
								<view class="thumb-box" @click="doThumbUp(pid,item.dynamic.mid,index)">
									<text class="thumb-num">{{item.dynamic.fabulous}}</text>
									<u-icon name="thumb-up" :color="item.dynamic.like?'#e10602':'#cccccc'" size="28">
									</u-icon>
								</view>
								<view style="margin-left: 20rpx;"></view>
								<u-icon name="chat" color="#840052" size="28" @click="doChat(item.dynamic.mid,index)">
								</u-icon>
							</view>
						</view>
						<view class="comments-box" v-if="item.comments.length > 0">
							<view v-for="(cItem,cIndex) in item.comments" :key="cIndex">
								<text class="comment"><text
										class="comments-name">{{cItem.nickname}}：</text>{{cItem.text}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-divider />
			</block>
			<u-loadmore :status="status" />
		</view>
		<!-- 悬浮按钮 -->
		<view class="sus-btn" v-if="!showChat">
			<u-button icon="plus" size="normal" color="#63B7AF" shape="circle" type="primary" @click="toNewMoment">
			</u-button>
		</view>
		<!-- 输入框 -->
		<view class="chat-footer" v-if="showChat">
			<input class="msg-input" type="text" maxlength="34" placeholder="请输入内容" cursor-spacing="16"
				v-model="myInput" />
			<view class="send-btn" @click="sendMsg">发送</view>
		</view>
	</view>
</template>

<script>
	import {
		momentList,
		sendComment,
		giveThumbs
	} from '@/config/api.js'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				momentList: [],
				showChat: false,
				myInput: '',
				status: 'loadmore',
				pageSize: 5,
				currmomentListIndex: -1,
				currMid: -1,
				pid: ''
			}
		},
		computed: {
			...mapState(['userinfo', 'loginState'])
		},
		onLoad() {
			this.pid = this.userinfo.pid;
			this.loadMoments(this.pid, this.pageSize)
			uni.$on('refreshData', () => {
				this.loadMoments(this.pid, this.pageSize)
			})
		},
		onShow() {

		},
		onPageScroll() {
			//滚动隐藏输入框
			this.showChat = false
			this.myInput = ''
		},
		//上拉加载数据
		onReachBottom() {
			this.status = 'loading'
			setTimeout(() => {
				this.loadMoments(this.pid, this.pageSize += 5)
				this.status = 'nomore'
			}, 2000)
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pageSize = 5
			setTimeout(() => {
				this.loadMoments(this.pid, this.pageSize)
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			//加载动态数据
			async loadMoments(userId, pageSize) {
				const {
					rows: data
				} = await momentList(userId, 1, pageSize)
				this.momentList = data
			},
			// 点赞
			async doThumbUp(userId, id, index) {
				if (this.loginState) {
					uni.showToast({
						title: '点赞中...',
						icon: 'loading',
						duration: 6000
					})
					const res = await giveThumbs(userId, {
						mid: id
					})
					// this.momentList[index].dynamic.fabulous += 1
					uni.hideToast()
					if (res.code == 200) {
						this.momentList.forEach((item) => {
							if (res.data.mid == item.dynamic.mid) {
								// 修改点赞
								item.dynamic.like = res.data.like;
								if(res.data.like){
									item.dynamic.fabulous += 1;
								} else {
									item.dynamic.fabulous -= 1;
								}
							}
						})
					}
					// this.loadMoments(this.pid,this.pageSize);
				} else {
					this.showMyToast('请先登录')
				}
			},
			// 弹出评论框
			doChat(mid, index) {
				if (this.loginState) {
					this.showChat = !this.showChat
					this.myInput = ''
					this.currMid = mid
					this.currmomentListIndex = index
				} else {
					this.showMyToast('请先登录')
				}
			},
			//发表评论
			async sendMsg() {
				if (this.myInput.length === 0) {
					this.showMyToast('请输入内容')
					return
				}
				uni.showToast({
					title: '发布中...',
					icon: 'loading',
					duration: 6000
				})

				const res = await sendComment({
					mid: this.currMid,
					userId: this.userinfo.pid,
					text: this
						.myInput
				})
				this.showChat = !this.showChat
				this.momentList[this.currmomentListIndex].comments.push({
					text: this
						.myInput,
					nickname: this.userinfo.nickName
				})
				uni.hideToast()
			},
			//跳转编写动态页面
			toNewMoment() {
				if (this.loginState) {
					uni.navigateTo({
						url: '/subpages/newMoment/newMoment'
					})
				} else {
					this.showMyToast('请先登录')
				}
			},
			showMyToast(str) {
				uni.showToast({
					icon: 'none',
					title: str
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #FEFEFE;
		min-height: 100vh;
		position: relative;
	}

	.moment-body {
		padding-bottom: 30rpx;
	}

	.moment-one {
		display: flex;
		padding: 20rpx 20rpx 0 20rpx;
		justify-content: flex-start;
		align-items: flex-start;

		.moment-face {
			width: 80rpx;
			height: 80rpx;
			border-radius: 20rpx;
		}

		.moment-box {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			width: 80%;

			.moment-name {
				color: #596C93;
				font-size: 30rpx;
				font-weight: bold;
			}

			.moment-content {
				font-size: 28rpx;
				margin-top: 8rpx;
			}

			.moment-img {
				max-width: 100%;
				margin-top: 10rpx;
			}

			.moment-adress {
				font-size: 24rpx;
				color: #5D6B8D;
				margin-top: 8rpx;
			}

			.time-more {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;
				height: 52rpx;

				.time {
					color: #828282;
					font-size: 24rpx;
				}

				.more-box {
					display: flex;

					.thumb-box {
						display: flex;

						.thumb-num {
							line-height: 52rpx;
							margin-right: 10rpx;
							color: #840052;
						}
					}
				}
			}

			.comments-box {
				display: flex;
				flex-direction: column;
				background-color: #F7F7F7;
				padding: 15rpx;
				border-radius: 10rpx;

				.comments-name {
					color: #5A6C95;
					font-weight: bold;
				}
			}
		}
	}

	.sus-btn {
		z-index: 2;
		right: 50rpx;
		bottom: 50rpx;
		position: fixed;
	}

	.chat-footer {
		box-sizing: border-box;
		width: 100%;
		height: 115rpx;
		padding: 0 40rpx;
		position: fixed;
		bottom: 0;
		background-color: #F1F1F1;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #ddd;

		.msg-input {
			background-color: #fff;
			width: 65%;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 30rpx;
			border-radius: 20rpx;
			padding: 0 20rpx;
		}


		.send-btn {
			height: 60rpx;
			line-height: 60rpx;
			width: 20%;
			text-align: center;
			background-color: green;
			color: #fff;
			border-radius: 12rpx;
		}
	}
</style>
